<template>
  <div style="position: relative;width: 100%;height: 86vh">
    <div id="container"/>
    <div class="mapSearch">
      <el-input prefix-icon="el-icon-search"
                placeholder="请输入你要查找的关键词" v-model="userInput" id="autoComplete"></el-input>
      <el-button type="primary" @click="choose">去这里</el-button>
    </div>
    <div id="panel"/>

  </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader'

window._AMapSecurityConfig = {
  securityJsCode: '1dc6dfc5bf47d5625b6573a1a3a13ce0'//在这里填写你的安全密钥
}
export default {
  data() {
    return {
      map: null,
      autoOptions: {
        input: 'autoComplete' //绑定的搜索关键字的input标签ID，用这个注册
      },
      auto: null,
      userInput: '', //绑定的搜索关键字的的内容
      placeSearch: null,
      searchHere: null, //根据搜索组件搜索到以后的地点信息
    }
  },
  mounted() {
    this.initMap()
  },
  methods: {

    // poi搜索以后 点击确认选址以后的操作
    choose() {
      if (this.searchHere) {
        this.$message({
          message: '确认地点：' + this.searchHere.name,
          type: 'success'
        });
        console.log(this.searchHere)

        //构造路线导航类
        var driving = new AMap.Driving({
          map: this.map,
          panel: "panel"
        });
        // 根据起终点经纬度规划驾车导航路线
        driving.search(new AMap.LngLat(116.379028, 39.865042),
          new AMap.LngLat(116.427281, 39.903719),
          function (status, result) {
            if (status === 'complete') {
              console.log('绘制驾车路线完成')
            } else {
              console.log('获取驾车数据失败：' + result)
            }
          })
      }
    },
    initMap() {
      AMapLoader.load({
        key: "e3b9b45c79628c4b86f2d0096cb10c7a", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ['AMap.ToolBar', 'AMap.Scale', 'AMap.HawkEye', 'AMap.MapType',
          'AMap.Geolocation', 'AMap.AutoComplete', 'AMap.PlaceSearch', 'AMap.Geocoder',
          'AMap.Driving',
          'AMap.ControlBar',
        ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      }).then((AMap) => {
        this.map = new AMap.Map("container", { //设置地图容器id
          viewMode: "3D", //是否为3D地图模式
          zoom: 8, //初始化地图级别
          center: [119.384021, 32.445749],
        });
        //引入高德地图的空间绑定使用
        this.map.addControl(new AMap.Scale())
        this.map.addControl(new AMap.ToolBar())
        this.map.addControl(new AMap.HawkEye())
        this.map.addControl(new AMap.MapType())
        this.map.addControl(new AMap.ControlBar())
        this.map.addControl(new AMap.Geolocation({
          enableHighAccuracy: true,//是否使用高精度定位，默认:true
          timeout: 10000,          //超过10秒后停止定位，默认：5s
          buttonPosition: 'RB',    //定位按钮的停靠位置
          buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
          zoomToAccuracy: true,   //定位成功后是否自动调整地图视野到定位点
        }))
        this.auto = new AMap.AutoComplete(this.autoOptions)
        //
        this.placeSearch = new AMap.PlaceSearch({
          map: this.map
        }) //构造地点查询类
        this.auto.on('select', this.select)//绑定查询事件

      }).catch(e => {
        console.log(e);
      })
    },

    //poi搜索 这里面的这个参数 e 就是搜索以后的地址信息 你可以把它打印出来看一看经纬度什么的都有
    select(e) {
      this.placeSearch.setCity(e.poi.adcode) //依据城市ID搜索
      this.placeSearch.search(e.poi.name) //关键字查询查询
      this.map.setZoom(10, true)
      this.searchHere = e.poi
      this.$message({
        message: '选择地点:' + this.searchHere.name,
        type: 'success'
      });
    }
  },

}
</script>

<style lang="scss" scoped>
#container {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}

.mapSearch {
  display: flex;
  justify-content: center;
  position: absolute;
  left: 35%;
  top: 20px;

  .el-button {
    margin-left: 8px;
  }
}

#panel {
  position: fixed;
  background-color: white;
  max-height: 90%;
  overflow-y: auto;
  top: 15%;
  right: 10px;
  width: 280px;
}

#panel .amap-call {
  background-color: #009cf9;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

#panel .amap-lib-driving {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  overflow: hidden;
}
</style>
